<template>
  <div id="app">
    <el-container>
      <el-backtop
        :bottom="100"
      >
        <div
          style="
             {
              height: 100%;
              width: 100%;
              background-color: #f2f5f6;
              box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
              text-align: center;
              line-height: 40px;
              color: #1989fa;
            }
          "
        >
          UP
        </div>
      </el-backtop>
      <el-header v-if="headShow">
        <novel-head></novel-head>
      </el-header>
      <el-main>
        <!-- <novel-main></novel-main> -->
        <router-view></router-view>
        {{ $store.state.isOpenBookrack }}
      </el-main>
      <el-footer v-if="headShow">
        <novel-footer></novel-footer>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
//模块
import NovelHead from "@/components/NovelHead.vue";

import NovelMain from "@/components/NovelMain.vue";
import NovelFooter from "@/components/NovelFooter.vue";
//静态资源
const logo = require("@/assets/logo.png");

export default {
  components: { NovelHead, NovelMain, NovelFooter },
  name: "App",
  data() {
    return {
      name: "name",
      password: "password",
      logo,
      user:{},
    };
  },

  methods: {},
  computed: {
    // 获取vux的数据
    ...mapState("routeJump", [
      "headShow",
      "isOpenBookrack",
      "isLogin",
      "toUserPage",
      "toHome",
      "toChapter",
      "chapterId",
      "toWriter",
      "edit",
      "editBookId",
      "toChapterAction",
      "toBookAction",
    ]),
  },
  //侦听数据变化
  watch: {
    edit() {
      this.$router.push({
        name: "editBook",
        params: {
          bookId: this.editBookId,
        },
      });
    },
    toWriter() {
      this.$router.push({
        name: "writer",
      });
    },
    toChapterAction: {
      deep: true, //不设置，a改变时watch无法检测到numbers改变
      handler(val, oldVal) {
        console.log("路由跳转", val);
        let bookId = this.$route.params.id;
        if (!bookId) {
          bookId = this.$route.params.bookId || val.bookId;
        }
        this.$router.push({
          name: "chapter",
          params: {
            bookId,
            chapterSort: val.chapterSort,
          },
        });
      },
    },
    isOpenBookrack(val, oldVal) {
      if (this.$route.path != "/bookshelf") {
        this.$router.push({
          name: "bookshelf",
        });
      }
    },
    isLogin() {
      if (this.$route.path != "/login") {
        this.$router.push({
          name: "login",
        });
      }
    },
    toBookAction: {
      deep: true, //不设置，a改变时watch无法检测到numbers改变
      handler(val, oldVal) {
        console.log("路由跳转", val);
        this.$router.push({
          name: "book",
          params: {
            id: val.bookId,
          },
        });
      },
    },
    toUserPage() {
      this.$router.push({
        name: "userPage",
      });
    },
    toHome() {
      this.$router.replace({
        name: "main",
      });
    },
  },
  created() {
    // this.$store.watch(
    //   (state, getters) => {
    //     return state.count;
    //   },
    //   () => {
    //     this.changeCount++;
    //   }
    // );
    // this.init();
  },

  //init
   init() {
      this.user = sessionStorage.getItem("userInfo") ? JSON.parse(sessionStorage.getItem("userInfo")) : {}
      let username = this.user.username;
      let _this = this;
      if (typeof (WebSocket) == "undefined") {
        console.log("您的浏览器不支持WebSocket");
      } else {
        console.log("您的浏览器支持WebSocket");
        let socketUrl = "ws://localhost:8001/imserver/" + username;
        if (socket != null) {
          socket.close();
          socket = null;
        }
        // 开启一个websocket服务
        socket = new WebSocket(socketUrl);
        //打开事件
        socket.onopen = function () {
          console.log("websocket已打开");
        };
        //  浏览器端收消息，获得从服务端发送过来的文本消息
        socket.onmessage = function (msg) {
          console.log("收到数据====" + msg.data)
          let data = JSON.parse(msg.data)  // 对收到的json数据进行解析， 类似这样的： {"users": [{"username": "zhang"},{ "username": "admin"}]}
          if (data.users) {  // 获取在线人员信息
            _this.users = data.users.filter(user => user.username !== username)  // 获取当前连接的所有用户信息，并且排除自身，自己不会出现在自己的聊天列表里
          } else {
            // 如果服务器端发送过来的json数据 不包含 users 这个key，那么发送过来的就是聊天文本json数据
            //  // {"from": "zhang", "text": "hello"}
            if (data.from === _this.chatUser) {
              _this.messages.push(data)
              // 构建消息内容
              _this.createContent(data.from, null, data.text)
            }
          }
        };
        //关闭事件
        socket.onclose = function () {
          console.log("websocket已关闭");
        };
        //发生了错误事件
        socket.onerror = function () {
          console.log("websocket发生了错误");
        }
      }
    }
};
</script>

<style>
</style>
